<template>
<div class="order-container">
    <template v-if="orderList.length>0">
        <mt-order-item 
            v-for="(goodsList, index) of orderList" 
            :key="index"
            :order="goodsList"
            :index="index"
            @handleDeleteOrder="deleteOrder"
        ></mt-order-item>
    </template>
    <template v-else>
        <div>没有订单， 请去购买</div>
    </template>
</div>
</template>

<script type="text/ecmascript-6">
import OrderItem from "./OrderItem"

export default {
    name: "Order",
    data() {
        return {
            orderList: []
        }
    },
    components: {
        [OrderItem.name]: OrderItem
    },
    mounted () {
        // this.orderList = this.$store.state.order;
        this.orderList = JSON.parse(localStorage.getItem('order')) || [];
        // console.log(this.orderList);
    },
    methods: {
        deleteOrder(index) {
            this.orderList.splice(index, 1);
            let order = JSON.stringify(this.orderList);
            localStorage.setItem('order', order);
        }
    }
}
</script>

<style scoped lang='scss'>
</style>